<template>
	<view class="flex-col page">
		<view class="flex-col relative group">
			<!-- <view class="shrink-0 section" ></view> -->
			<image class="shrink-0 section" src="../../static/S.jpg" ></image>
			<view class="flex-row items-end relative group-person">
				<image class="avatar" src="../../static/S.png" mode="circle"/>
				<text class="text">{{'svga动画'}}</text>
			</view>
		</view>
		<scroll-view class="text-wrapper" scroll-y="true">
			<view class="text-container">
				<text class="font-regular text-white">{{introduction}}</text>
			</view>
		</scroll-view>
		<view class="flex-col group-rc">
			<button shape="round" class="button" @click="clickRewardBtn" >赞赏作者</button>
			<view class="flex-col group-contact">
				<text class="self-center font-regular text-gray">联系我</text>
				<view class="flex-row justify-between equal-division">
					<image class="equal-division-item" src="../../static/WeChat.png" @click="clickWeChatImg" />
					<image class="equal-division-item" src="../../static/Channels.png" @click="clickChannelsImg"/>
					<image class="equal-division-item" src="../../static/Douyin.png" @click="clickDouyinImg"/>
					<image class="equal-division-item" src="../../static/Xiaohongshu.png" @click="clickXiaohongshuImg"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//调用uniCloud前置步骤：在工程主目录右键创建uniCloud云开发环境，后关联uniCloud云服务空间使用
	export default {
		components: {},
		props: {},
		data() {
			return {
				backgroundImage: '',
				avatar: '',
				nickname: '',
				introduction: `语雀是蚂蚁集团旗下的在线文档编辑与协同工具，旨在帮助用户建立起知识管理的意识，培养良好的知识管理习惯。它使用了“结构化知识库管理”，形式上类似书籍的目录，要求每一篇文档必须属于某一个知识库。语雀的愿景是成为人们创作和交流知识的场所。12

语雀的特点包括：

打通了从“零碎笔记”整理到结构“知识库”的链路架构，通过知识库来组织及管理知识，通过协作及分享让知识流动起来。
专门针对程序员群体推出了多项高级功能，如友好的Markdown语法、沉浸式创作的全键盘输入、可自定义主题的代码块、可自由调整样式的数学公式，以及含思维导图、流程图、UML图等制图功能。
开放了API满足个性化需求，移动端iOS与Android是同步上线，其中iOS还支持iPad，方便用户多端同步使用。
提供了丰富的应用场景，如项目文档、学习笔记、团队专栏、帮助手册等，能够切实有效的帮助到众多用户。
语雀的功能包括：

小记功能，用户可以记录每日工作清单或瞬间灵感，并添加标签进行分类。
文档功能，用户可以建立多个知识库来组织和管理文档。
支持文本、图片、链接、语音等多种形式的内容记录，语音可以直接转成文字保存。
此外，语雀还提供了公共空间和企业空间两种使用方式，公共空间为个人用户、小团`,
				qrCodeList: []
				//静态数据调试
				// backgroundImage: 'https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/417ff586e617f186604d2ba613308ccb.jpeg',
				// avatar: 'https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/avatar.png',
				// introduction: "Melodic John, a gifted guitarist who paints vibrant stories with his strings. With a seamless fusion of technique and emotion, Melodic John's music transcends genres, resonating deeply with listeners worldwide. From soulful ballads to electrifying solos, his melodies weave intricate narratives that evoke powerful feelings. With influences ranging from blues to rock, Melodic John's unique sound captures the essence of musical storytelling. With each note, he takes audiences on a journey, showcasing a harmonious blend of skill and passion. Prepare to be captivated by the artistry of Melodic John's guitar as he creates soul-stirring magic through his strings.",
				// nickname: 'Melodic John',
				// qrCodeList:["https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ask.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ext.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ask.dcloud.net.cn.png","https://7463-tcb-z2djeh548fdcp27-0ci3c558358f-1319895633.tcb.qcloud.la/Product-sample/qrcode_ext.dcloud.net.cn.png"]
			};
		},
		onLoad() {
		},
		methods: {
			async getData() {
				const res = await db.collection('product-person').where('nickname=="Melodic John"').get();
				const data = res.result.data[0];
				console.debug(data);
				this.avatar = data.avatar.url;
				this.backgroundImage = data.backgroud_image.url;
				this.nickname = data.nickname;
				this.introduction = data.introduction;
				this.qrCodeList = [data.wechat_image.url,data.channels_image.url,data.douyin_image.url,data.xiaohongshu_image.url];
			},
			clickRewardBtn(){
				//赞赏作者按钮的点击事件，可对接赞赏金额页面及支付功能
				uni.showToast({
					title:'点击了赞赏',
					duration:2000
				});
			},
			qrCodePreImage(current){
				uni.previewImage({
					urls: this.qrCodeList, 
					current: current,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			clickWeChatImg() {
				this.qrCodePreImage(0);
			},
			clickChannelsImg() {
				this.qrCodePreImage(1);
			},
			clickDouyinImg() {
				this.qrCodePreImage(2);
			},
			clickXiaohongshuImg() {
				this.qrCodePreImage(3);
			}
		}
	};
</script>

<style scoped lang="css">
	
	
	.page {
		background-color: #ccc;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}
	
	.group {
		margin-top: -65.38rpx;
	}

	.section {
		border-radius: 0px 0px 38.46rpx 38.46rpx;
		background: url('https://up.enterdesk.com/edpic_source/d4/10/8f/d4108f00695e0b35cfe9bcf009e6499d.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		width: 100vw;
		height: 42vh;
		background-position: center bottom;
	}

	.group-person {
		margin-top: -48.08rpx;
		padding: 0 61.54rpx;
	}

	.avatar {
		border: 2px solid #FFF;
		border-radius: 50%;
		width: 96.15rpx;
		height: 96.15rpx;
	}

	.text {
		margin-left: 46.15rpx;
		margin-bottom: 7.69rpx;
		color: #ffffff;
		font-size: 30.77rpx;
		font-family: Inter;
		line-height: 23.08rpx;
	}

	.text-wrapper {
		max-width: 95%;
		margin: 88.46rpx 20rpx 0 20rpx;
		background-color: #21212133;
		border-radius: 15rpx;
		overflow: hidden;
		height: 40vh;
		align-items: center;
		justify-content: flex-start;
	}

	.text-container {
		max-width: 90%;
		margin: 0 auto;
		padding: 10px;
	}

	.text-container:after {
		content: "";
		display: inline-block;
		width: 100%;
	}

	.font-regular {
		font-size: 26.92rpx;
		font-family: Inter;
	}

	.text-white {
		color: #ffffff;
		line-height: 38.46rpx;
		width: 569.23rpx;
	}

	.group-rc {
		padding: 86.54rpx 38.46rpx 30.77rpx;
	}

	.group-contact {
		padding: 53.85rpx 40.38rpx;
	}

	.text-gray {
		color: #949596;
		line-height: 25rpx;
	}

	.equal-division {
		margin-right: 5.77rpx;
		margin-top: 53.85rpx;
	}

	.equal-division-item {
		border-radius: 50%;
		width: 96.15rpx;
		height: 96.15rpx;
	}
	.button {
		padding: 34.62rpx 0px;
		margin-left: unset;
		margin-right: unset;
		border-radius: 192.31rpx;
		background-image: linear-gradient(101.9deg, #ea5c30 0%, #d93121 100%) !important;
		border: unset;
		height: 113.46rpx;
		background-size: cover;
		background-color: unset !important;
		background-repeat: no-repeat;
		color: #ffffff !important;
		font-family: Inter;
		font-size: 46.15rpx;
		line-height: 42.31rpx;
	}

	.button:after {
		border-radius: 384.62rpx;
		display: none;
	}
	html {
		font-size: 16px;
	}
	
	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}
	
	#app {
		width: 100vw;
		height: 100vh;
	}
	
	.flex-row {
		display: flex;
		flex-direction: row;
	}
	
	.flex-col {
		display: flex;
		flex-direction: column;
	}
	
	.justify-start {
		justify-content: flex-start;
	}
	
	.justify-end {
		justify-content: flex-end;
	}
	
	.justify-center {
		justify-content: center;
	}
	
	.justify-between {
		justify-content: space-between;
	}
	
	.justify-around {
		justify-content: space-around;
	}
	
	.justify-evenly {
		justify-content: space-evenly;
	}
	
	.items-start {
		align-items: flex-start;
	}
	
	.items-end {
		align-items: flex-end;
	}
	
	.items-center {
		align-items: center;
	}
	
	.items-baseline {
		align-items: baseline;
	}
	
	.items-stretch {
		align-items: stretch;
	}
	
	.self-start {
		align-self: flex-start;
	}
	
	.self-end {
		align-self: flex-end;
	}
	
	.self-center {
		align-self: center;
	}
	
	.self-baseline {
		align-self: baseline;
	}
	
	.self-stretch {
		align-self: stretch;
	}
	
	.flex-1 {
		flex: 1 1 0%;
	}
	
	.flex-auto {
		flex: 1 1 auto;
	}
	
	.grow {
		flex-grow: 1;
	}
	
	.grow-0 {
		flex-grow: 0;
	}
	
	.shrink {
		flex-shrink: 1;
	}
	
	.shrink-0 {
		flex-shrink: 0;
	}
	
	.relative {
		position: relative;
	}
</style>